<template>
	<div class="">
		<!--<base-header></base-header>-->
		<loading v-if="isloading"></loading>
		<!--文章详情-->
		<div class="list-li">
			<header class="list-header">
				<div class="list-user">
					<img class="list-user-head" :src="url+(user.avatar_path)+(user.avatar)" /> {{user.name}}
				</div>
				<div class="list-time">
					{{question.created_at}}
				</div>
			</header>
			<h4 class="list-title">{{question.title}}</h4>
			<div class="list-main" v-html="question.content">

			</div>
		</div>
		<!--评论列表-->
		
		<ul class="comment-ul">
			<li class="comment-li" v-for="answer in answer_list">
				<header class="comment-header">
					<div class="list-user">
						<img class="list-user-head" :src="url+(answer.avatar_path)+(answer.avatar)" /> {{answer.manager_name?answer.manager_name:'姓名'}}
						<span class="list-time">{{answer.created_at}}</span>
					</div>
				</header>
				<div class="comment-main" v-html="answer.content">

				</div>
			</li>
			<no-msg v-if="noMsg" msg="暂无相关回答"></no-msg>
		</ul>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import NoMsg from "@/components/common/NoMsg"
	import Loading from "@/components/common/Loading"
	import { formatDate } from '@/util/date'
	export default {
		name: 'QuestionDetail',
		components: {
			BaseHeader,
			NoMsg,
			Loading
		},
		filters: {
			//时间格式过滤器
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd  hh:mm')
			}
		},
		data() {
			return {
				qid: '',
				url: '',
				question: '',
				user: '',
				answer_list: [],
				t: [],
				answer_page: '1',
				content: '',
				noMsg: false,
				isloading: true
			}
		},
		mounted() {
			this.qid = this.$route.params.qid;
			var self = this;
			//为窗口的scroll事件绑定处理函数 
			$(window).scroll(function() {
				if($(document).scrollTop() >= $(document).height() - $(window).height()) {
					//alert("滚动条已经到达底部为" + $(document).scrollTop());
					self.page++;
					if(self.answer_page < self.answer_page_count) {
						self.getDetails();
					} else {
						return 'noMore';
					}
				}
			});
			this.getDetails();
		},
		methods: {
			//获取详情
			getDetails() {
				var self = this;
				var data = {
					id: self.qid,
					page: self.answer_page
				};
				$.post(global.domain + global.API.sns_question_view, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.question = msg.question;
						self.user = msg.user;
						self.answer_list = msg.answer.data;
						self.answer_page_count = msg.answer.page_count;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						if(msg.answer.data.length > 0) {
							self.noMsg = false;
						} else {
							self.noMsg = true;
						}
					} else {
						console.log(msg.error);
					}
				}, 'json');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/list.css";
	@import "../../style/article.css";
	.list-li {
		border-bottom: none;
	}
	
	.list-main {
		text-indent: 1.5em;
		padding-bottom: 10px;
	}
	
	.comment-ul {
		border-top: none;
		margin-top: 10px;
	}
	
	.noMsg {
		padding-top: 50px;
	}
</style>